<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar title="购物车"/>
        </div>
        <div class="Cart-box">
            <ul>
                <li v-for="(item,index) in cartInfo" :key="index">
                    <div class="lab">
                        <van-checkbox v-model="checked"></van-checkbox>
                    </div>
                    <div class="content">
                        <div class="div_img">
                            <img :src="item.image" alt="" width="100%">
                        </div>
                        <div class="div1">
                            <p>{{item.Name}}</p>
                            <div class="price">
                                <span>￥{{item.price}}</span>
                                <van-stepper v-model="item.count"/>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="Cart-footer">
            <div class="global_btn">
                <van-checkbox v-model="global">全选</van-checkbox>
            </div>
            <div class="global_box">
                <span class="span1">合计：<b>￥1</b></span>
                <van-button round type="danger">结算({{cartInfoLength}})</van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            cartInfo:[],//购物车的商品,
            isEmpty:false, //判断购物车是否为空  不为空是true
            checked:true,
            global:true,
            cartInfoLength:''
        }
    },
    created(){
        this.getCartInfo()
        console.log(this.cartInfo)
    },
    methods:{
       //得到购物车的商品
       getCartInfo(){
           if(localStorage.cartInfo){
               this.cartInfo = JSON.parse(localStorage.cartInfo)
               this.cartInfo.forEach((el,index) => {
                   this.$set(this.cartInfo[index],'checked','true')
               });
               this.cartInfoLength = this.cartInfo.length
           }
           this.isEmpty = this.cartInfo.length>0? true : false
       }
    }
}
</script>

<style>
.lab{
    /* padding:7px;
    padding-right:12px; */
    padding:0 0.7rem 0;
}
.Cart-box{
    background:#FFF;
    padding-bottom:40px;
}
.Cart-box ul li{
    display: flex;
    flex-flow: row;
    border-bottom:1px solid #f0f0f0;
    padding:0.8rem 0;
}
.Cart-box ul li .content>div{
    display: inline-block;
}
.Cart-box ul li .content .div_img{
    border:1px solid #f0f0f0;
    width:4.5rem;
}
.Cart-box ul li .content .div1{
    width:11rem;
    vertical-align:top;
    font-size:0.75rem;
    padding-left:.45rem;
    color:#e5017d;
}
.Cart-box ul li .content .div1 .price{
    margin-top:1.3rem;
    position: relative;
}
.van-stepper{
    position: absolute;
    right:0px;
    top:-3px;
    z-index:10;
}
.van-stepper__minus, .van-stepper__plus{
    border-radius:100% !important;
    width:22px;
    height:22px;
}
.van-stepper__input{
    border:0px;
}

.Cart-footer{
    width:100%;
    height:2.5rem;
    background:#FFF;
    position: fixed;
    bottom:0px;
    left:0px;
    border-top:1px solid #e5017d;
    z-index:9999;
    display:flex;
    font-size:0.75rem;
}
.Cart-footer .global_btn{
    line-height: 2.5rem;
    width:4rem;
    padding-left:0.65rem;
    padding-right:1.4rem;
}
.Cart-footer .global_box{
    height:2.4rem;
    line-height: 2.4rem;
    flex:1;
    text-align: right;
    padding-top:.1rem;
    padding-right:.8rem;
}
.Cart-footer .global_box .van-button{
    height:1.8rem;
    line-height: 1.8rem;
}
.Cart-footer .global_box .span1{
    margin-right:.6rem;
}
.Cart-footer .global_box .span1 b{
    color:#e5017d;
}
</style>
